<template>
  <div>
    <QhDrawer title="基础">
      <div class="config-item">
        <label>标题:</label>
        <el-input
          size="mini"
          :value="widget.title"
          placeholder="请输入标题"
          @input="changeWidget('title', $event)"
        ></el-input>
      </div>
    </QhDrawer>
    <QhDrawer title="X 轴">
      <div class="config-item">
        <label>是否显示</label>
        <el-switch
          size="mini"
          :value="widget.chartOption.xAxis.show"
          @change="changeWidget('chartOption.xAxis.show', $event)"
        ></el-switch>
      </div>
      <div class="config-item">
        <label>标题:</label>
        <el-input
          size="mini"
          :value="widget.chartOption.xAxis.name"
          @input="changeWidget('chartOption.xAxis.name', $event)"
        ></el-input>
      </div>
      <div class="config-item">
        <label>位置</label>
        <el-radio-group
          size="mini"
          :value="widget.chartOption.xAxis.position"
          @input="changeWidget('chartOption.xAxis.position', $event)"
        >
          <el-radio-button label="bottom">下面</el-radio-button>
          <el-radio-button label="top">上面</el-radio-button>
        </el-radio-group>
      </div>
    </QhDrawer>
    <QhDrawer title="网格(Grid)">
      <div class="config-item">
        <label>是否显示</label>
        <el-switch
          size="mini"
          :value="widget.chartOption.grid.show"
          @change="changeWidget('chartOption.grid.show', $event)"
        ></el-switch>
      </div>
      <div class="config-item">
        <label>背景颜色:</label>
        <el-color-picker
          size="mini"
          show-alpha
          color-format="rgb"
          :value="widget.chartOption.grid.backgroundColor"
          @change="changeWidget('chartOption.grid.backgroundColor', $event)"
        ></el-color-picker>
      </div>
      <div class="config-item">
        <label>顶部距离</label>
        <el-input-number
          size="mini"
          :min="0"
          controls-position="right"
          :value="widget.chartOption.grid.top"
          @input="changeWidget('chartOption.grid.top', $event)"
        ></el-input-number>
      </div>
      <div class="config-item">
        <label>Left:</label>
        <el-input-number
          size="mini"
          :min="0"
          controls-position="right"
          :value="widget.chartOption.grid.left"
          @input="changeWidget('chartOption.grid.left', $event)"
        ></el-input-number>
      </div>
      <div class="config-item">
        <label>Right:</label>
        <el-input-number
          size="mini"
          :min="0"
          controls-position="right"
          :value="widget.chartOption.grid.right"
          @input="changeWidget('chartOption.grid.right', $event)"
        ></el-input-number>
      </div>
      <div class="config-item">
        <label>Bottom:</label>
        <el-input-number
          size="mini"
          :min="0"
          controls-position="right"
          :value="widget.chartOption.grid.bottom"
          @input="changeWidget('chartOption.grid.bottom', $event)"
        ></el-input-number>
      </div>
    </QhDrawer>
  </div>
</template>
<script>
import { createObjectByPath } from "../../utils"

export default {
  name: "TheChartConfig",
  props: {
    widget: {
      type: Object,
      required: true,
    },
  },
  methods: {
    changeWidget(path, value) {
      this.$store.dispatch(
        "UpdateWidget",
        Object.assign(createObjectByPath(path, value), {
          id: this.widget.id,
        })
      )
    },
  },
}
</script>
<style lang="scss">
.config-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  margin: 5px;
  > label {
    margin-right: 5px;
    width: 60px;
  }
  .el-input,
  .el-input-number {
    flex: 1;
  }
}
</style>
